<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    v-model="activeName"
  >
    <el-tab-pane label="土壤湿度" name="土壤湿度">
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="datetime"
            placeholder="选择开始时间"
            size="mini"
            v-model="form.startTime"
            default-time="00:00:00"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="datetime"
            placeholder="选择结束时间"
            size="mini"
            v-model="form.endTime"
            default-time="00:00:00"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="week">一周</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="month">一月</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="all">全部</el-button>
        </el-form-item>
      </el-form>
      <div id="soil" class="chart"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "SoilChart",
  props: {
    node: Object,
  },
  data() {
    return {
      form: {
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
      },
      activeName: "土壤湿度",
      humidityChart: null,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    initHumidityChart(collectTimeData, humidityData, queryData) {
      let xArray = [];
      let yArray1 = [];
      let yArray2 = [];
      let yArray3 = [];

      if (collectTimeData[0] != "") {
        for (let i = 0; i < collectTimeData[0].length; i++) {
          xArray.push(
            moment(collectTimeData[0][i].replace(/-/g, "/")).format(
              "YYYY-MM-DD HH"
            )
          );
        }
      }

      if (humidityData[0] != "") {
        for (let i = 0; i < humidityData[0].length; i++) {
          yArray1.push(humidityData[0][i]);
        }
      }

      if (humidityData[1] != "") {
        for (let i = 0; i < humidityData[1].length; i++) {
          yArray2.push(humidityData[1][i]);
        }
      }

      if (humidityData[2] != "") {
        for (let i = 0; i < humidityData[2].length; i++) {
          yArray3.push(humidityData[2][i]);
        }
      }
      let chartOption = {
        color: ["#ff180c", "#0c0aff", "#ff9d04"],

        title: {
          text:
            this.node.label +
            "站点" +
            queryData.startTime +
            "至" +
            queryData.endTime +
            "内土壤湿度",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 30,
          data: ["通道1土壤湿度", "通道2土壤湿度", "通道3土壤湿度"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          right: "5%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xArray,
        },
        yAxis: {
          type: "value",
          min: "dataMin",
          max: "dataMax",
          axisLabel: {
            formatter: "{value} %",
          },
        },
        series: [
          {
            name: "通道1土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#ff180c",
              },
            },
            data: yArray1,
          },
          {
            name: "通道2土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#0c0aff",
              },
            },
            data: yArray2,
          },
          {
            name: "通道3土壤湿度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
                color: "#ff9d04",
              },
            },
            data: yArray3,
          },
        ],
      };

      this.humidityChart.setOption(chartOption);
    },
    creatHumidityChart(result_list, queryData) {
      let data = [];
      let collectTimeData = [];
      let humidityData = [];
      let collectTimeDataItem = [];
      let humidityDataItem = [];
      if (result_list.length != 0) {
        for (let i = 0; i < result_list.length; i++) {
          let list_data = result_list[i].list;

          collectTimeDataItem = [];
          humidityDataItem = [];

          for (let j = 0; j < list_data.length; j++) {
            let humidityDataTemp = list_data[j].waterPressure;
            let collectTimeDataTemp = list_data[j].collectDate;
            collectTimeDataItem.push(collectTimeDataTemp);
            humidityDataItem.push(parseFloat(humidityDataTemp).toFixed(1));
          }
          collectTimeData.push(collectTimeDataItem);
          humidityData.push(humidityDataItem);
        }
        this.initHumidityChart(collectTimeData, humidityData, queryData);
      }
    },
    queryHumidityChart(resultObj, queryData) {
      if (resultObj.parameter.list != null && resultObj.parameter.list != "") {
        let result_list = resultObj.parameter.list;
        this.creatHumidityChart(result_list, queryData);
      }
    },
    search(startTime, endTime) {
      this.humidityChart.showLoading();
      let queryData = {
        startTime,
        endTime,
      };
      sessionStorage.setItem("startTime", queryData.startTime);
      sessionStorage.setItem("endTime", queryData.endTime);
      this.form.startTime = queryData.startTime;
      this.form.endTime = queryData.endTime;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"tunnelNumber\\":\\"\\"}","serviceCode":"queryWaterTableByDate","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.humidityChart.hideLoading();
        this.queryHumidityChart(res.data, queryData);
      });
    },
    query() {
      this.search(
        moment(this.form.startTime).format("YYYY-MM-DD"),
        moment(this.form.endTime).format("YYYY-MM-DD")
      );
    },
    week() {
      this.search(
        moment().subtract(7, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
    month() {
      this.search(
        moment().subtract(31, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
    all() {
      this.search(
        moment().subtract(1860, "d").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD")
      );
    },
  },
  mounted() {
    this.humidityChart = this.$echarts.init(document.getElementById("soil"));
    this.humidityChart.showLoading();
    let queryData = {
      startTime: moment().subtract(1860, "d").format("YYYY-MM-DD"),
      endTime: moment().format("YYYY-MM-DD"),
    };
    if (sessionStorage.getItem("startTime"))
      queryData.startTime = sessionStorage.getItem("startTime");
    if (sessionStorage.getItem("endTime"))
      queryData.endTime = sessionStorage.getItem("endTime");
    this.form.startTime = moment(queryData.startTime).format(
      "YYYY-MM-DD 00:00:00"
    );
    this.form.endTime = moment(queryData.endTime).format("YYYY-MM-DD 00:00:00");
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"tunnelNumber\\":\\"\\"}","serviceCode":"queryWaterTableByDate","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.humidityChart.hideLoading();
      this.queryHumidityChart(res.data, queryData);
    });
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 1600px;
  height: 75vh;
}
</style>